import React from 'react';
import { Calendar, ConfigProvider, theme } from 'antd';
import zhCN from 'antd/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';

// 设置 dayjs 全局语言为中文
dayjs.locale('zh-cn');

const onPanelChange = (value, mode) => {
    console.log(value.format('YYYY-MM-DD'), mode);
};

const AntCalendar = () => {
    const { token } = theme.useToken();
    const wrapperStyle = {
        width: 300,
        border: `1px solid ${token.colorBorderSecondary}`,
        borderRadius: token.borderRadiusLG,
    };
    return (
        <ConfigProvider locale={zhCN}>
            <div style={wrapperStyle}>
                <Calendar fullscreen={false} onPanelChange={onPanelChange} />
            </div>
        </ConfigProvider>
    );
};

export default AntCalendar;
